<template>
  <div class="oilAllCar">
    <x-header title="我的车辆" :left-options="{backText:''}" class='whiteHeader'></x-header>
    <div class="allCars">
      <div class="carList" v-for="(item,index) in allCarMess.CARS" v-if='item.BRAND!="未设置"' :key="index">
        <div class="allMess border-bottom" @click="toshowMine(item)">
          <div class="carLogo">
            <img :src="allCarMess.CAR_LOGO_URL+item.SICON" alt="">
          </div>
          <div class="carMess">
            <p>
              {{item.LICENCE}} <span v-if='item.MILE'>里程 {{item.MILE}} km</span>
            </p>
            <h2>{{item.BRAND}}{{item.SET}}{{item.MODEL}}</h2>
          </div>
        </div>
        <div class="operate">
          <div class="select" @click="selectCar(item.CAR_ID)" :class="{'on':item.CAR_ID==selectId}"></div><em :class="{'active':item.CAR_ID==selectId}">设为默认</em>
          <span @click="deleteCar(item.CAR_ID)" class="delete">
            </span>
          <span @click="editCar(item)" class="edit">
            </span>
        </div>
      </div>

    </div>
    <div class="noData" v-if='allCarMess&&allCarMess.CARS.length==0'>
      <img src="../../assets/image/address/noCar.png" alt="" />
      <p>你暂无车辆，请添加</p>
    </div>
    <a class="addCar" href="javascript:;" @click='addCar'>
      <img src="../../assets/image/address/addCar.png">
      添加爱车
    </a>
  </div>
</template>
<script>
  /*所有车辆*/
  import { XHeader } from 'vux';
  // import { MessageBox } from 'mint-ui';
  import { setCookie, getCookie,clearCookie } from '../../util/commonUtils';
  export default {
    name:"oilAllCar",
    // 数据
    data(){

      return{
        userId:'', //用户
        allCarMess:'',  //所有车辆的信息
        selectId:''   //选择默认id
      }
    },
    // 子组件
    components:{
      XHeader
    },
    // 计算属性
    computed:{

    },
    // 创建（实例创建完成）
    created(){
      this.userId=getCookie('loginkey');
      this.selectId=getCookie('CAR_ID');
      //获取用户所有车辆
      this.$fetchGet('/UserWeb/getCars.action',{USER_ID:this.userId}).then(res=>{
        if(res.STATUS_CODE==1){
          this.allCarMess=res;
          localStorage.setItem("publicUrl",this.allCarMess.CAR_LOGO_URL);
          let cars = res.CARS
          // 默认车辆

          for(let i=0;i<cars.length;i++){
            if(cars[i].IS_DEFAULT_CAR==1){
              this.selectCar(cars[i].CAR_ID)
            }
          }

        }
      },err=>{
        console.log(err);
      })
    },
    // el被创建，并挂载到实例上
    mounted(){

    },
    // 方法（实例中的方法）-----------
    methods:{
      // 选择车辆(设置默认车辆)
      selectCar(id){
        this.$fetchPost('/TempCarWeb/updateUseCar.action',{USER_ID:this.userId,CAR_INFO_ID:id}).then(res=>{
          if(res.STATUS_CODE==1){
            this.selectId=id;
            setCookie('CAR_ID',id);
          }
        },err=>{
          console.log(err);
        })
      },
      //删除车辆
      deleteCar(id){
        if(id==this.selectId){
          this.$vux.alert.show({
            title: '提示',
            content: '默认车辆不能删除'
          })
          return;
        }
        this.$fetchPost('/TempCarWeb/deleteTempCar.action',{USER_ID:this.userId,CAR_ID:id}).then(res=>{
          let that=this;
          if(res.STATUS_CODE==1){
            this.$vux.alert.show({
              title: '提示',
              content: '车辆删除成功',
              onHide () {
                that.allCarMess.CARS=that.allCarMess.CARS.filter(function(item){
                  return item.CAR_ID!=id;
                })
              }
            })
          }
        },err=>{
          console.log(err);
        })
      },
      //编辑车辆
      editCar(item){
        localStorage.setItem("editCar",JSON.stringify(item));//存储编辑的信息
        localStorage.removeItem('from');
        localStorage.removeItem("addCar")
        this.$router.push("/updateCar")
      },
      addCar(){
        localStorage.setItem("addCar",JSON.stringify({}));
        localStorage.removeItem('from');
        localStorage.removeItem('editCar');
        this.$router.push("/addCar");
        // 表示添加车辆不是来自选择车辆
        localStorage.removeItem('selectCars');
      },
      // 跳转我的页面
      toshowMine(item){
        this.selectCar(item.CAR_ID)
        this.$router.push('/mine')
      }
    }
  }
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
  .oilAllCar{
    width: 7.5rem;
    padding-bottom: 0.6rem;
    min-height: 100%;
    background: #efeff4;
    .commentHeader{
      background: #fff;
      color: #000;
      border-bottom: 1px solid #d9d9d9;
      font-size: 0.361111rem;
    }
    .noData{
      position: absolute;
      top: 50%;
      left: 50%;
      text-align: center;
      transform: translate(-50%,-50%);
      img{
        width: 1.7rem;
        height: 1.41rem;
      }
      p{
        font-size: 0.22rem;
        color: #ccc;
      }
    }
    .allCars{

      .carList{
        background: #fff;
        margin-bottom: 0.2rem;
        text-align: left;
        .border-bottom{
          position: relative;
          border-top: none !important;
        }
        .border-bottom::after {
          content: " ";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 1px;
          background-color: #e0e0e0;
          -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
        }
        .allMess{
          display: flex;
          /* border-bottom: 1px solid #e1e1e1; */
          padding:0.1rem 0.15rem;
          .carLogo{
            width:15%;
            img{
              display: block;
              width: 0.8rem;
              height: 0.8rem;
              margin:0.1rem auto;
            }
          }
          .carMess{
            padding: 0 0 0 0.2rem;
            width: 85%;
            h2{
              font-size: 0.22rem;
              margin: 0.1rem 0;
              color: #686868;
              margin-bottom: 0.2rem;
            }
            p{
              font-size: 0.3rem;
              font-weight: bold;
              color: #111;
              margin: 0.1rem 0 0.2rem 0;
              span{
                float: right;
                font-size: 0.26rem;
                color:#666;
                padding-right: 0.28rem;
                font-weight: normal;
              }
            }

          }
        }
        .operate{
          height: 0.76rem;
          padding:0rem 0.2rem;
          .select{
            width: 0.42rem;
            height:0.4rem;
            margin-top: 0.2rem;
            float: left;
            padding: 0.15rem;
            background: url(../../assets/image/address/noChecked.png) center center no-repeat;
            background-size: 0.39rem 0.4rem;
          }
          .on{
            background: url(../../assets/image/address/checked.png) center center no-repeat;
            background-size: 0.39rem 0.4rem;
          }
          em{
            font-size: 0.277778rem;
            color: #686868;
            font-style: normal;
            line-height: 0.83rem;
            float: left;
            padding-left: 0.1rem;
          }
          .active{
            color: red;
          }
          span{
            float: right;
            font-size: 0.25rem;
            margin-top: 0.23rem;
            margin-right: 0.2rem;
            display: inline-block;
            width:0.4rem;
            height: 0.4rem;
            color: #686868;
          }
          .edit{
            background: url(../../assets/image/address/edit.png) no-repeat;
            background-size: 0.32rem 0.32rem;
            margin-right: 0.42rem;
          }
          .delete{
            background: url(../../assets/image/address/delete.png) no-repeat;
            background-size: 0.32rem 0.32rem;
          }
        }
      }

    }
    .addCar{
      position:fixed;
      bottom:0;
      width: 100%;
      display: block;
      height:0.8rem;
      line-height: 0.8rem;
      font-size: 0.305556rem;
      text-align: center;
      background: #ec2121;
      display: flex;
      align-items:center;
      justify-content:center;
      color: #fff;
      img{
        width: 0.55rem;
        height: 0.33rem;
        margin-right: 0.1rem;
      }
    }
  }
</style>
